<template>
    <div id="book-info">
        <el-page-header @back="goBack" content="返回列表">
        </el-page-header>
        <div style="margin-bottom: 10px;"></div>
        <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="书名：">
                <span>{{ form.name }}</span>
            </el-form-item>
            <el-form-item label="作者：">
                <span>{{ form.author }}</span>
            </el-form-item>
            <el-form-item label="所属类别：">
                <span>{{ form.categoryName }}</span>
            </el-form-item>
            <el-form-item label="位置：">
                <span>{{ form.location }}</span>
            </el-form-item>
            <el-form-item label="出版社：">
                <span>{{ form.publicationInformation }}</span>
            </el-form-item>
            <el-form-item label="总数：">
                <span>{{ form.totalNumber }}</span>
            </el-form-item>
            <el-form-item label="剩余数：">
                <span>{{ form.spareNumber }}</span>
            </el-form-item>
            <el-form-item label="是否可借阅：">
                <span>{{ form.status ? '不可借阅' : '可借阅' }}</span>
            </el-form-item>

            <el-form-item label="封面：">
                <!-- <img :src="form.picture" alt="" width="100" height="100"> -->
                <el-image style="width: 100px; height: 100px" :src="srcImg"></el-image>
            </el-form-item>

            <el-form-item label="入库时间：">
                <span>{{ form.createTime }}</span>
            </el-form-item>
            <el-form-item label="描述：">
                <span>{{ form.description }}</span>
            </el-form-item>
            <el-button type="primary" v-if="form.status == 0 & (roleId == 1 || roleId == 2)"
                @click="dialogVisible = true">借阅</el-button>
        </el-form>

        <el-dialog title="添加信息"  :visible.sync="dialogVisible" :close-on-click-modal="false"
            :close-on-press-escape="false">
            <el-form label-width="80px">
                <el-form-item label="用户名">
                    <el-select filterable  v-model="userId" placeholder="请选择用户名" clearable>
                    <el-option v-for="(item, index) in userData" :key="index" :label="item.userName"
                        :value="item.id"></el-option>
                </el-select>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addInfo">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { bookInfo, lendBook } from '@/api/book'
import { userList2 } from '@/api/user'

export default {

    methods: {
        // api
        getUserList(){
            userList2().then(res=>{
                console.log(res.data.list)
                this.userData = res.data.list
            })
        },
        // api
        getBookInfo() {
            bookInfo({ id: this.id }).then(res => {
                this.form = res.data
                this.srcImg = require('@/assets'+ this.form.picture)
            }).catch(error => {
                reject(error)
            })
        },
        // api
        addInfo() {
            console.log(this.userId, "this.userId")
            lendBook({ id: this.id, userId: this.userId  }).then(res => {
                this.$message({
                    type: 'warning',
                    message: res.data
                });
                this.getBookInfo()
                this.dialogVisible = false
            }).catch(error => {
                reject(error)
            })
        },

        goBack() {
            this.$router.push("/book/book_list")
        },

    },
    created() {
        this.id = this.$route.query.id;
        this.roleId = this.$store.state.user.roleId
        this.getBookInfo()
        this.getUserList()
    },
    data() {
        return {
            userData: [],
            dialogVisible: false,
            roleId: '',
            userId: '',
            id: '',
            form: {

            },
            srcImg: ''
        }
    }
}
</script>


<style  lang="scss" scoped>
#book-info {
    padding: 40px 20px;
    width: 60%;
}
</style>